import 'package:flutter/material.dart';
import '../model/post.dart';

class ViewDemo extends StatelessWidget {
  const ViewDemo({super.key});

  Widget _grideItemBuilder(BuildContext context, int index) {
    return Image.network(
      posts[index].imageUrl,
      fit: BoxFit.cover,
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: posts.length,
      itemBuilder: _grideItemBuilder,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8, 
            ),
    );
  }
}


class GridViewExtentDemo extends StatelessWidget {
  const GridViewExtentDemo({super.key});

  List<Widget> _buildTiles(int length) {
    return List.generate(
      length,
      (int index) => Container(
        color: Colors.grey[300],
        alignment: const Alignment(0, 0),
        child: Text(
          'Ttem $index',
          style: const TextStyle(fontSize: 18, color: Colors.grey),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 150,
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      scrollDirection: Axis.horizontal,
      children: _buildTiles(16),
    );
  }
}

class GridViewCountDemo extends StatelessWidget {
  const GridViewCountDemo({super.key});

  List<Widget> _buildTiles(int length) {
    return List.generate(
      length,
      (int index) => Container(
        color: Colors.grey[300],
        alignment: const Alignment(0, 0),
        child: Text(
          'Ttem $index',
          style: const TextStyle(fontSize: 18, color: Colors.grey),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 4,
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      // scrollDirection: Axis.horizontal,
      children: _buildTiles(16),
    );
  }
}

class PageViewBuilderDemo extends StatelessWidget {
  const PageViewBuilderDemo({super.key});

  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(
      children: [
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.fill,
          ),
        ),
        Positioned(
          bottom: 8,
          left: 8,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                posts[index].title,
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(
                posts[index].author,
              )
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}

class PageViewDemo extends StatelessWidget {
  const PageViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return PageView(
      // pageSnapping: false,
      // reverse: true,
      // scrollDirection: Axis.vertical,
      onPageChanged: (crrentPage) => debugPrint('page:$crrentPage'),
      controller: PageController(
        initialPage: 2,
        keepPage: false,
        viewportFraction: 0.85,
      ),
      children: [
        Container(
          color: const Color.fromARGB(255, 3, 142, 206),
          alignment: const Alignment(0, 0),
          child: const Text(
            '0',
            style: TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
        Container(
          color: const Color.fromARGB(255, 1, 50, 72),
          alignment: const Alignment(0, 0),
          child: const Text(
            '1',
            style: TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
        Container(
          color: const Color.fromARGB(255, 2, 111, 162),
          alignment: const Alignment(0, 0),
          child: const Text(
            '2',
            style: TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ],
    );
  }
}
